@extends('admin.layout')

@section('title', '新建菜单')
@section('page-title', '新建菜单')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="space-y-6">
        <!-- 返回按钮 -->
        <div class="flex items-center">
            <a href="{{ route('admin.menus.index') }}" 
               class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                返回菜单列表
            </a>
        </div>

        <!-- 添加菜单表单 -->
        <div class="bg-white shadow-lg rounded-xl border border-gray-100">
        <div class="px-6 py-6 border-b border-gray-200">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-indigo-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <h2 class="text-xl font-semibold text-gray-900">添加新菜单</h2>
            </div>
            <p class="mt-2 text-sm text-gray-600">填写菜单的基本信息</p>
        </div>

        <form method="POST" action="{{ route('admin.menus.store') }}" class="px-6 py-6">
            @csrf
                
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- 菜单名称 -->
                <div class="sm:col-span-2">
                    <label for="name" class="block text-sm font-medium text-gray-700">
                        菜单名称 <span class="text-red-500">*</span>
                    </label>
                    <div class="mt-1">
                        <input type="text" 
                               name="name" 
                               id="name"
                               value="{{ old('name') }}"
                               required
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('name') border-red-300 @enderror"
                               placeholder="请输入菜单名称">
                    </div>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 菜单描述 -->
                <div class="sm:col-span-2">
                    <label for="description" class="block text-sm font-medium text-gray-700">
                        菜单描述
                    </label>
                    <div class="mt-1">
                        <textarea name="description" 
                                  id="description" 
                                  rows="4"
                                  class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('description') border-red-300 @enderror"
                                  placeholder="请输入菜单描述">{{ old('description') }}</textarea>
                    </div>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 创建者 -->
                <div class="mb-6">
                    <label for="creator_id" class="block text-sm font-medium text-gray-700 mb-2">
                        创建者 <span class="text-red-500">*</span>
                    </label>
                    <select id="creator_id" 
                            name="creator_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('creator_id') border-red-500 @enderror"
                            required>
                        <option value="">请选择创建者</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('creator_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->nickname }} ({{ $user->phone }})
                            </option>
                        @endforeach
                    </select>
                    @error('creator_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 来源类型 -->
                <div class="mb-6">
                    <label for="source_type" class="block text-sm font-medium text-gray-700 mb-2">
                        来源类型 <span class="text-red-500">*</span>
                    </label>
                    <select id="source_type" 
                            name="source_type" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('source_type') border-red-500 @enderror"
                            required>
                        <option value="">请选择来源类型</option>
                        <option value="default" {{ old('source_type') == 'default' ? 'selected' : '' }}>默认菜单</option>
                        <option value="custom" {{ old('source_type') == 'custom' ? 'selected' : '' }}>自定义菜单</option>
                    </select>
                    @error('source_type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 来源菜单 -->
                <div class="mb-6" id="source_menu_field" style="display: none;">
                    <label for="source_id" class="block text-sm font-medium text-gray-700 mb-2">
                        基于菜单
                    </label>
                    <select id="source_id" 
                            name="source_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('source_id') border-red-500 @enderror">
                        <option value="">请选择要基于的菜单</option>
                        @foreach($sourceMenus as $menu)
                            <option value="{{ $menu->id }}" {{ old('source_id') == $menu->id ? 'selected' : '' }}>
                                {{ $menu->name }} ({{ $menu->creator->nickname }})
                            </option>
                        @endforeach
                    </select>
                    @error('source_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- 状态设置 -->
                <div class="mb-6">
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox" 
                                   id="is_public" 
                                   name="is_public" 
                                   value="1"
                                   {{ old('is_public') ? 'checked' : '' }}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="is_public" class="ml-2 block text-sm text-gray-900">
                                设为公开菜单
                            </label>
                        </div>
                        
                        <div class="flex items-center">
                            <input type="checkbox" 
                                   id="is_template" 
                                   name="is_template" 
                                   value="1"
                                   {{ old('is_template') ? 'checked' : '' }}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="is_template" class="ml-2 block text-sm text-gray-900">
                                设为模板菜单
                            </label>
                        </div>
                    </div>
                </div>

            <div class="flex justify-end space-x-3 mt-6">
                <a href="{{ route('admin.menus.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    取消
                </a>
                <button type="submit" 
                        class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    创建菜单
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sourceTypeSelect = document.getElementById('source_type');
    const sourceMenuField = document.getElementById('source_menu_field');
    
    function toggleSourceMenuField() {
        if (sourceTypeSelect.value === 'custom') {
            sourceMenuField.style.display = 'block';
        } else {
            sourceMenuField.style.display = 'none';
            document.getElementById('source_id').value = '';
        }
    }
    
    sourceTypeSelect.addEventListener('change', toggleSourceMenuField);
    toggleSourceMenuField(); // 初始化
});
</script>
    </div>
</div>
@endsection
